<template>
	<view class="page">
		<view class="header">
			<view class="header-1"><u-icon name="arrow-leftward" color="323233" size="18" @click="toGoBack()"></u-icon>
			</view>
			<view class="header-2">
				<image src="/static/logo.png"></image>
				教育培训系统
			</view>
			<view class="header-3"></view>
		</view>
		<view class="content">
			<view class="title">修改密码</view>
			<u-form labelPosition="left" :model="registForm" :rules="rules" :errorType="errorType" ref="uForm" labelWidth="100">
				<view class="register-basic">
					<u-form-item label="旧密码" prop="oldPassword">
						<u--input placeholder="请输入旧密码" type="password" v-model="registForm.oldPassword" border="none"></u--input>
					</u-form-item>
				</view>
				<view class="register-basic">
					<u-form-item label="新密码" prop="password">
						<u--input placeholder="请输入新密码" type="password" v-model="registForm.password" border="none"></u--input>
					</u-form-item>
				</view>
				<view class="register-basic">
					<u-form-item label="重复密码" prop="repeatPsd">
						<u--input placeholder="请输入重复密码" type="password" v-model="registForm.repeatPsd" border="none"></u--input>
					</u-form-item>
				</view>
				<view class="register-basic">
					<u-form-item label="验证码" prop="code">
						<view class="u-flex flex">
							<u-input v-model="registForm.code" placeholder="验证码"></u-input>
							<view style="flex: 0.1;">
								<u-image :showLoading="true" :src="fileImage+imgUrl" width="100px" height="38px"
									@click="changeCode">
								</u-image>
							</view>
						</view>
					</u-form-item>
				</view>
				<view class="reg-btn">
					<u-button class="btn-submit" type="primary" :loading="loading" :disabled="loading" @click="formSubmit">确 定</u-button>
				</view>
			</u-form>
		</view>
	</view>
</template>

<script>
	import md5 from "js-md5"
	import { modifyPassword } from '@/api/login'
	export default {
		data() {
			var validatePass = (rule, value, callback) => {
				const passwordreg = /(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{6,16}/
				if (value === '') {
					callback(new Error('新密码不能为空'));
				}
				else if (!passwordreg.test(value)) {
					callback(new Error('密码必须由数字、字母、特殊字符组合,请输入6-16位'))
				} 
				else {
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('重复密码不能为空'));
				} else if (value !== this.registForm.password) {
					callback(new Error('两次密码输入不一致'));
				} else {
					callback();
				}
			};
			return {
				loading: false,
				registForm: {
					oldPassword: '',
					password: '',
					repeatPsd: '',
					code: '',
					timestamp: '',
				},
				rules: {
					oldPassword: [{
						required: true,
						message: '旧密码不能为空',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						validator: validatePass,
						trigger: 'blur'
					}],
					repeatPsd: [{
						required: true,
						validator: validatePass2,
						trigger: 'blur'
					}],
					code: [{
						required: true,
						message: '验证码不能为空',
						trigger: 'blur'
					}]
				},
				errorType: 'toast',
				fileImage: this.$globalSetting.fileImage,
				timestamp: '',
				imgUrl: '',
			}
		},
		onLoad() {
			this.changeCode()
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			changeCode() {
				let timestamp = Math.random()
				this.timestamp = timestamp
				this.imgUrl = `/api/file/ImageCode/${timestamp}`
			},
			formSubmit() {
				this.$refs.uForm.validate().then(res => {
					let params = {
						oldPassword: md5(this.registForm.oldPassword),
						password: md5(this.registForm.password),
						code: this.registForm.code,
						timestamp: this.timestamp
					}
					modifyPassword(params).then(res => {
						this.showSuccess("密码修改成功，即将退出请重新登录！", 'none');
						this.$store.dispatch('user/logout').then(() => {
							uni.reLaunch({
								url: '/pages/register/login'
							})
						})
					}).catch(() => {
						// this.changeImg()
					})
				}).catch(errors => {
					console.log('校验失败')
				})
			},
			toGoBack() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		font-size: 16px;
		text-align: center;
		margin: 20px 0;
	}
	.reg-btn {
		margin-top: 50rpx;
	}
	.reg-btn button{
		width: 100%;
	}
	.content {
		padding: 0 10px;
	}
	
	
	
	.register-basic {
		width: 100%;
		background-color: #fff;
		box-sizing: border-box;
		padding: 0 32rpx;
	}

	/deep/ .uni-input-input {
		text-align: right;
	}

	/deep/ .u-form-item__body__right__message {
		text-align: right;
	}

	/deep/ .uni-input-placeholder {
		text-align: right;
	}

	.page {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		position: relative;


		background: #F6F8FC;


		.header {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			background-color: #fff;
			display: flex;

			.header-1 {
				margin: 30rpx 0 0 38rpx;
				justify-content: center;
				align-items: center;

			}

			.header-2 {
				flex: 10;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 48rpx;
					height: 48rpx;
					margin-right: 16rpx;
				}
			}

			.header-3 {
				flex: 1;
			}
		}

		.content {
			// .title {
			// 	margin: 32rpx 0 0 32rpx;
			// 	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
			// 	font-weight: 400;
			// 	font-size: 28rpx;
			// 	color: #323233;
			// 	line-height: 40rpx;
			// 	text-align: left;
			// 	font-style: normal;
			// }

			.input {
				margin: 16rpx 0 0 0rpx;
				width: 750rpx;
				height: 1624rpx;
				background: #F6F8FC;
			}
		}



	}
</style>